<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>历史预算</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
    <div class="container">
        <h1>历史预算</h1>
        
        <div class="nav-buttons">
            <a href="/" class="btn">首页</a>
            <a href="/budget" class="btn">预算管理</a>
            <a href="/expenses" class="btn">查看支出</a>
        </div>
        
        <h2>选择月份</h2>
        <form method="GET" action="/budget/history">
            <div class="form-row">
                <div class="form-group">
                    <label>月份:</label>
                    <select name="month" class="form-control">
                        {% for i in range(1, 13) %}
                            <option value="{{ i }}" {% if i == selected_month %}selected{% endif %}>{{ i }}月</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="form-group">
                    <label>年份:</label>
                    <select name="year" class="form-control">
                        {% for y in range(selected_year, selected_year - 5, -1) %}
                            <option value="{{ y }}" {% if y == selected_year %}selected{% endif %}>{{ y }}</option>
                        {% endfor %}
                    </select>
                </div>
            </div>
            <button type="submit" class="btn">查看</button>
        </form>
        
        <h2>{{ selected_year }}年{{ selected_month }}月预算情况</h2>
        
        {% if budgets %}
            <div class="table-responsive">
                <table>
                    <thead>
                        <tr>
                            <th>预算金额</th>
                            <th>支出金额</th>
                            <th>剩余金额</th>
                            <th>使用率</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for budget in budgets %}
                            <tr>
                                <td data-label="预算金额">￥{{ budget.budget }}</td>
                                <td data-label="支出金额">￥{{ "%.2f"|format(expenses.total or 0) }}</td>
                                <td data-label="剩余金额">￥{{ budget.remaining }}</td>
                                <td data-label="使用率">{{ "%.1f"|format(((budget.budget - budget.remaining) / budget.budget * 100)) if budget.budget > 0 else 0 }}%</td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        {% else %}
            <p>该月份没有预算数据。</p>
        {% endif %}
    </div>
</body>
</html>